<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <select id="select" onchange="change()">
        <option value="1">样式风格1</option>
        <option value="2">样式风格2</option>
        <option value="3">样式风格3</option>
    </select>

    <h1 >李白《行路难•其一》</h1>
    <p >
        金樽清酒斗十千，玉盘珍羞直万钱。 <br />
        停杯投箸不能食，拔剑四顾心茫然。 <br />
        欲渡黄河冰塞川，将登太行雪满山。 <br />
        闲来垂钓碧溪上，忽复乘舟梦日边。 <br />
        行路难！行路难！多歧路，今安在？ <br />
        长风破浪会有时，直挂云帆济沧海。 <br />
    </p>

    <script type="text/javascript">
        function change() {
            
            switch (select.value) {
                case "1":
                    document.body.style.background = "#000";
                    document.body.style.color = "#0f0";
                    break;
                case "2":
                    document.body.style.background = "#f00";
                    document.body.style.color = "#00f";
                    break;
                case "3":
                    document.body.style.background = "#ff0";
                    document.body.style.color = "#088";
                    break;
            }
        }
    </script>
</body>
</html>